<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" class="login-form" auto-complete="on" label-position="left">

      <h1 class="title">汽车商城管理系统</h1>

      <div class="title-container">
        <h3 class="title">Login Form</h3>
      </div>

      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user"/>
        </span>
        <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="用户名"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
            class="inp"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password"/>
        </span>
        <el-input
            ref="password"
            v-model="loginForm.password"
            placeholder="密码"
            name="password"
            tabindex="2"
            auto-complete="on"
            class="inp"
        />
      </el-form-item>

      <el-button type="primary" style="width:100%;margin-bottom:30px;"
                 @click="login">登录
      </el-button>
      <router-link style="width: 100%; text-align: right; display: inline-block; margin-top: 25px; color: #5cb85c"
                   to="/registered">
        <el-button type="primary" style="width:100%;margin-bottom:30px;">
          还没账号？去注册
        </el-button>
      </router-link>


    </el-form>
  </div>
</template>

<script>

import {getloginForm} from '@/api/login'

export default {
  name: 'loginName',
  data() {
    return {

      loginForm: {
        username: '',
        password: ''
      }

    }
  },

  methods: {

    login() {
      getloginForm(this.loginForm).then(response => {
        console.log(response)
        if (response.data.code == 200) {
          this.$message.success("登录成功")
          sessionStorage.setItem("token", response.data.data.map.token)
          localStorage.setItem('permissions', JSON.stringify(response.data.data.map.permissions))
          localStorage.setItem("userInfo", JSON.stringify(response.data.data.map.user))

          this.$router.push({path: '/home'})
        }
      }).catch(error => {
        this.$message.error("登录失败");
      })


    }

  }
}
</script>

<style>

.login-container {
  width: 100%;
  height: 100%;
  background-color: #1b6d85;
}

.title {
  color: red;
}

</style>
